<!DOCTYPE html>
<html lang="en">
<title>Physical Computing Fall 2025</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<style>
body,h1,h2,h3,h4,h5 {
  font-family: "Poppins", sans-serif
  }
body {
  font-size:16px;
  }
h1 { 
  font-size:30px;
  }
h2 {
  font-size:25px;
  }
  h3 {
  font-size:18px;
  }
img {
  width: 100%;
  height: 100%;
}
.grid {
  display: inline-grid;
  grid-template-columns: auto auto auto auto auto;;
}
.w3-half img{
  margin-bottom:-6px;
  margin-top:16px;
  opacity:0.8;
  cursor:pointer
  } */
.w3-half img:hover{
  opacity:1
  }

.container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
</style>
<body>

<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-light-grey w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:200px;font-weight:bold;" id="mySidebar"><br>
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-display-topleft" style="display:none;font-size:22px"></a>
  <div class="w3-container">
    <h3 class="w3-padding-64"><b>IXD<br>DESN 30146<br>Fall 2025</b></h3>
  </div>
  <div class="w3-bar-block">
    <a href="#Home" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Home</a> 
    <a href="#Module3" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Module 3</a> 
    <a href="#Workshop1" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Workshop 1</a> 
    <a href="#Workshop2" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Workshop 2</a>
    <a href="#Activity1" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Activity 1</a> 
    <a href="#Activity2" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Activity 2</a>
    <a href="#AdditionalResearch" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Additional Research or Workshops</a>
    <a href="#Project2" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Project 2 Prototype</a> 
  </div>
</nav>

<!-- Top menu on small screens
<header class="w3-container w3-top w3-xlarge w3-padding">
  <a href="javascript:void(0)" class="w3-button w3-red w3-margin-right" onclick="w3_open()">☰</a>
  <span>Menu</span>
</header> -->

<!-- 
  if you want to link your image to a video use one of the following alt links as an example:

  alt="test1Lorem ipsum dolor sit amet, consectetur adipiscing elit test1Lorem ipsum dolor sit amet, consectetur adipiscing elit <a href='https://www.youtube.com/embed/tgbNymZ7vqY' target='_blank'><p>Project Video Link</p></a>"> 
  alt="test2Lorem ipsum dolor sit amet, consectetur adipiscing elit <div class='container'><iframe class='responsive-iframe' src='https://www.youtube.com/embed/tgbNymZ7vqY'></iframe></div>">

-->

<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:220px;margin-right:20px">

  <!-- Header -->
  <div class="w3-container" style="margin-top:80px" id="default">
    <h1 class="w3-jumbo" id="Home"><b>Module 3 Activity Research</b></h1>
    <h1 class="w3-xxxlarge w3-text-blue"><b>Weekly Activity Template</b></h1>
      <h1 class="w3-xxxlarge w3-text-blue"><b>Tzu Yu Hwa</b></h1>
    <hr style="width:50px;border:5px solid grey" class="w3-round">
  </div>
  <!-- Boilerplate -->
  <div id="Module2" class="w3-container" style="margin-top:75px">
    <h1 class="w3-xxxlarge w3-text-red"><b>Project 3</b></h1>
    <hr style="width:50px;border:5px solid red" class="w3-round">
    <h2>Module 3</h2>
    <h3>Project 3 explores how interaction design can support intuitive, embodied experiences by transforming simple touch-based inputs into meaningful digital feedback. 
      <br>The focus of this project is a dog-friendly interactive board, where each paw press triggers different digital responses through Makey Makey and conductive materials.
<br>Through this process, the project looks at how non-verbal users like pets can participate in playful and intentional interactions without needing traditional interfaces. 
      <br>By testing sensors, materials, and UI feedback across Activities 1 and 2, the project investigates what makes a physical input feel reliable, accessible, and fun.
      <br>The goal is to design an accessible, playful, and emotionally engaging interface that bridges physical interaction with digital behavior, <br> 
      ultimately showing how design can adapt to users who communicate through movement, curiosity, and instinct rather than language.
    </h3>
  </div> <!-- Project 1 Photo grid (modal) -->
<hr style="width:90%;border:5px solid grey;margin-top:80px" class="w3-round"></hr>
  <div id="Activity1" >
    <h2>Activity 1: My Research</h2>
    <div class="grid">
      <img src="images/Activity1/a1a.jpg" style="width:100%" onclick="onClick(this)" alt="The initial software test confirms that Makey Makey successfully detects key inputs and triggers actions on-screen. The unknown is whether the system will remain stable once multiple sensors and larger conductive surfaces are added."> 
      <img src="images/Activity1/a2a.png" style="width:100%" onclick="onClick(this)" alt="This test shows that the copper tape pads can sense pressure when the dog's paw presses the surface, proving basic sensor responsiveness. However, it is still unknown whether the sensitivity will remain consistent across different paw sizes and user behaviors.">
      <img src="images/Activity1/a3a.jpg" style="width:100%" onclick="onClick(this)" alt="The early prototype reveals that placing the paw pads in four corners feels natural for a dog’s movement. The UX unknown is whether users will understand which pad triggers which action without additional visual cues.">
      <img src="images/Activity1/a4a.png" style="width:100%" onclick="onClick(this)" alt="Cardboard and copper tape work as low-cost materials for testing alignment and electrical flow. The unknown is whether these materials will be durable enough once covered or used repeatedly by actual pets.">
      <img src="images/Activity1/a5a.png" style="width:100%" onclick="onClick(this)" alt="When all four pads are wired simultaneously, the prototype successfully detects multiple independent inputs. The challenge remains to prevent short-circuits and ensure the pads do not trigger accidentally when pressure spreads across the cardboard.">
    </div>
  </div>

  <div id="Activity2" class="w3-row-padding">
    <h2>Activity 2: My Research</h2>
    <div class="grid">
      <img src="images/Activity2/a1b.png" style="width:100%" onclick="onClick(this)" alt="The close-up test confirms that copper tape conducts evenly when pressed at different angles. The unknown is whether small misalignment or peeling over time will interrupt the signal.">
      <img src="images/Activity2/22b.jpg" style="width:100%" onclick="onClick(this)" alt="This wiring test shows that Makey Makey can support multiple simultaneous paw sensors without losing signal. An unknown remains regarding cable management and maintaining stable connections in the final casing.">
      <img src="images/Activity2/a3b.png" style="width:100%" onclick="onClick(this)" alt="The dog interacts naturally with the layout, confirming that the spacing works for intuitive movement. However, we still need to test whether dogs of different sizes will trigger the pads accurately.">
      <img src="images/Activity2/a4b.jpg" style="width:100%" onclick="onClick(this)" alt="Human testing helps confirm each pad's responsiveness and identifies the ideal pressure zone. A remaining unknown is whether users will need additional visual indicators to understand where the dog should step.">
      <img src="images/Activity2/a5b.jpg" style="width:100%" onclick="onClick(this)" alt="This test shows the cardboard pressure pads connected to the Makey Makey responding when the dog presses on them. The setup works, but the sensitivity and alignment still need refinement to ensure consistent activation.">
    </div>
  </div>

  <hr style="width:90%;border:5px solid grey;margin-top:80px" class="w3-round"></hr>

  <div id="AdditionalResearch" class="w3-row-padding">
    <h2>Additional Research or Workshops</h2>
    <div class="grid">
      <img src="images/AdditionalResearch/w1a.webp" style="width:100%" onclick="onClick(this)" alt="This research explores how dogs interact with commercial communication buttons through paw or nose activation. Understanding this behavior helps inform the scale, spacing, and clarity needed for my own pressure-pad design.">
      <img src="images/AdditionalResearch/w2.png" style="width:100%" onclick="onClick(this)" alt="This reference shows how pressure-sensitive mats visually react when weight is applied, demonstrating a clear cause-and-effect interaction. Studying this helps me understand how large-surface pressure activation works and how it could translate into a dog-friendly paw interface.">
      <img src="images/AdditionalResearch/w3.jpg" style="width:100%" onclick="onClick(this)" alt="This reference shows a simple DIY pressure sensor made with conductive materials, which closely relates to how my dog-interaction pad detects paw pressure. Understanding this layered structure helps me refine my own sensor design, especially in improving sensitivity and ensuring consistent activation. It also informs how to build a more durable and responsive physical prototype.">
      <img src="images/AdditionalResearch/w4.png" style="width:100%" onclick="onClick(this)" alt="This example demonstrates how Makey Makey can be used to create multiple touch-activated zones that trigger different audio responses. The layout and wiring structure closely relate to my dog-interaction pad, where each paw area activates a unique sound. Studying this setup helps me understand how to organize inputs more cleanly and build a more reliable multi-sensor system.">
      <img src="images/AdditionalResearch/w5.jpg" style="width:100%" onclick="onClick(this)" alt="This image shows a dog interacting with sound or training buttons placed on the floor. It illustrates how animals naturally respond to tactile prompts through play-based engagement. This research supports my project by showing how dogs use their paws to activate signals, reinforcing the feasibility of a paw-triggered interaction system.">
    </div>
  </div>

  <hr style="width:90%;border:5px solid grey;margin-top:80px" class="w3-round"></hr>
  <!-- Boilerplate -->
  <div id="Project2" class="w3-container" style="margin-top:75px">
    <h1 class="w3-xxxlarge w3-text-red"><b>Project 2</b></h1>
    <hr style="width:50px;border:5px solid red" class="w3-round">
    <h2>Project 3 Final Prototype</h2>
    <p>This project explores how animals could communicate through a simple physical interface. By building a pressure-sensitive step mat connected to Makey Makey and ProtoPie, I created a system where stepping on different zones triggers digital messages like “Eat,” “Walk,” “Poop,” and “Play.” The goal was to design an intuitive, paw-friendly interaction that translates physical actions into meaningful feedback on screen.
    </p>
    <img src="images/final/final.jpg" style="width:100%" onclick="onClick(this)" alt="This photo shows my completed four-zone communication mat connected to Makey Makey and ProtoPie. Each labeled stepping area (“EAT,” “WALK,” “POOP,” “PLAY”) is built with pressure-sensitive copper-tape sensors under a decorated wooden board. When the plush dog steps on a zone, the system triggers the corresponding message and animation on the laptop screen. This final setup demonstrates how a pet-friendly physical interface can translate simple actions into clear digital communication.https://youtube.com/shorts/JMjwChwgOG0?si=W5AUq-MdXvdYf65a">
  </div>
  
   <!-- Modal for full size images on click-->
   <div id="modal01" class="w3-modal w3-grey" style="padding-top:0" onclick="this.style.display='none'">
    <span class="w3-button w3-black w3-xxlarge w3-display-topright">×</span>
    <div class="w3-modal-content w3-center w3-transparent" style ="padding:20px">
      <img id="img01" class="w3-image">
      <h2 id="caption"></h2>

      <!-- <div id="urLink"></div> -->
      <!-- <a id="urLink" class="container"><iframe class="responsive-iframe"></iframe></a> -->
    <!-- </div> -->
  </div>
<!-- End page content -->
</div>

<!-- W3.CSS Container -->
<div class="w3-light-grey w3-container w3-padding-32" style="margin-top:75px;padding-right:58px"><p class="w3-right">Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-opacity">w3.css</a></p></div>

<script>

// Modal Image Gallery
function onClick(element) {
  document.getElementById("img01").src = element.src;

  document.getElementById("modal01").style.display = "block";
  var captionText = document.getElementById("caption");
  captionText.innerHTML = element.alt;

  // var captionUrl = document.getElementById("urLink");
  // captionUrl.innerHTML = element.url;

  //document.getElementById("urLink").src = element.url;
}
</script>

</body>
</html>
